import React, { useState, useEffect } from "react";
import styles from "./index.module.scss";
const ImagesView = props => {
  const [data, setState] = useState();
  useEffect(() => {
    setState({ ...props });
  }, [props]);

  const onClose = e => {
    if (e.target.dataset.type === "mask") {
      data.onCancel();
    }
  };

  return (
    <div className={styles.images_view}>
      {data && data.visible && (
        <div
          className={styles.mask}
          data-type="mask"
          onClick={e => {
            onClose(e);
          }}
        >
          <div className={styles.content} style={data.style}>
            {data.children || "暂无内容..."}
          </div>
        </div>
      )}
    </div>
  );
};

export default ImagesView;
